
<template>
  <div style="width: 230px; overflow: hidden">
    <el-col
      style="overflow-y: scroll"
      :style="{ height: heightLength + 'px' }"
      class="el-left-menu"
      :span="3"
    >
      <el-menu
        style="height: 200%"
        :default-active="active"
        background-color="#3366CC"
        text-color="#fff"
        class="el-menu-vertical-demo"
        router
        unique-opened
      >
        <el-submenu
          v-for="(item, index) in leftMenuList"
          :key="index"
          :index="item.menu_href"
        >
          <!-- title的模板 -->
          <template slot="title">
            <i :class="item.icon" style="color: #fff"></i>
            {{ item.menuName }}
          </template>

          <el-menu-item-group
            :key="list.menuUrl"
            v-for="list in item.sysMenuList"
          >
            <el-menu-item :index="list.menuUrl">{{
              list.menuName
            }}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "",
      scroll: "",
      routeList: [],
      heightLength: "",
      leftMenuList: [],
    };
  },

  //未用到的方式
  mounted() {
    // this.routeList = JSON.parse(sessionStorage.getItem("menus")); //获取当前菜单缓存
    console.log("菜单", this.routeList);
    // this.leftPermission();
    //菜单滚动
    window.addEventListener("scroll", () => {
      let scrollHeight = document.body.scrollHeight;
      this.heightLength = scrollHeight - 80;
    });
  },
  created() {
    //   this.leftPermission();
    //      this.activePath();
    this.heightLength = document.body.scrollHeight;
  },

  mounted() {
    //测试 设置左导航数据
    // this.leftMenuList = [
    //       {
    //         menuName: '管理员设置',
    //         menuUrl: "",
    //         menu_href: '1',
    //         icon: "el-icon-s-unfold",
    //         sysMenuList: [
    //           {
    //             menuName: '管理员列表',
    //             menuUrl: '/admin_manager_table',
    //             menu_href: 1-1,
    //           },
    //           {
    //             menuName: '角色列表',
    //             menuUrl: '/admin_manager_role_table',
    //             menu_href: 1-2,
    //           },
    //           {
    //             menuName: '菜单列表',
    //             menuUrl: '/admin_manager_menu_table',
    //             menu_href: 1-3,
    //           },
    //         ]
    //       },
    //       {
    //         menuName: '京东商品分类',
    //         menuUrl: "",
    //         menu_href: '2',
    //         icon: "el-icon-s-unfold",
    //         sysMenuList: [
    //           {
    //             menuName: '分类列表',
    //             menuUrl: '/jd_sort_m_jd_sort_m_table',
    //             menu_href: 2-1,
    //           },
    //         ]
    //       },
    //       {
    //         menuName: '京东商品管理',
    //         menuUrl: "",
    //         menu_href: '3',
    //         icon: "el-icon-s-unfold",
    //         sysMenuList: [
    //           {
    //             menuName: '京东商品列表',
    //             menuUrl: '/jd_m_jd_m_table',
    //             menu_href: 3-1,
    //           },
    //         ]
    //       },
    //       {
    //         menuName: '商品库管理',
    //         menuUrl: "",
    //         menu_href: '4',
    //         icon: "el-icon-s-unfold",
    //         sysMenuList: [
    //           {
    //             menuName: '商品库列表',
    //             menuUrl: '/cur_goods_m_cur_goods_m_table',
    //             menu_href: 4-1,
    //           },
    //         ]
    //       },
    //       {
    //         menuName: '商家商品审核',
    //         menuUrl: "",
    //         menu_href: '5',
    //         icon: "el-icon-s-unfold",
    //         sysMenuList: [
    //           {
    //             menuName: '商品审核列表',
    //             menuUrl: '/goods_verify_m_goods_verify_m_table',
    //             menu_href: 5-1,
    //           },
    //         ]
    //       },
    //       {
    //         menuName: '充值管理',
    //         menuUrl: "",
    //         menu_href: '6',
    //         icon: "el-icon-s-unfold",
    //         sysMenuList: [
    //           {
    //             menuName: '充值列表',
    //             menuUrl: '/charge_m_charge_m_list',
    //             menu_href: 6-1,
    //           },
    //         ]
    //       },
    //       {
    //         menuName: '财务管理',
    //         menuUrl: "",
    //         menu_href: '7',
    //         icon: "el-icon-s-unfold",
    //         sysMenuList: [
    //           {
    //             menuName: '拼团统计列表',
    //             menuUrl: '/financial_m_ping_tuan_table',
    //             menu_href: 7-1,
    //           },
    //           {
    //             menuName: '每日释放列表',
    //             menuUrl: '/financial_m_mei_ri_shi_fang',
    //             menu_href: 7-2,
    //           },
    //           {
    //             menuName: 'v3加速释放',
    //             menuUrl: '/financial_m_v3_speed_up_table',
    //             menu_href: 7-3,
    //           },
    //           {
    //             menuName: '提现列表',
    //             menuUrl: '/financial_m_extract_table',
    //             menu_href: 7-4,
    //           },
    //         ]
    //       },
    //       {
    //         menuName: '会员管理',
    //         menuUrl: "",
    //         menu_href: '8',
    //         icon: "el-icon-s-unfold",
    //         sysMenuList: [
    //           {
    //             menuName: '会员列表',
    //             menuUrl: '/member_m_user_table',
    //             menu_href: 8-1,
    //           },
    //           {
    //             menuName: '用户实名审核',
    //             menuUrl: '/member_m_user_verify_table',
    //             menu_href: 8-2,
    //           },
    //         ]
    //       },
    //       {
    //         menuName: '代理管理',
    //         menuUrl: "",
    //         menu_href: '9',
    //         icon: "el-icon-s-unfold",
    //         sysMenuList: [
    //           {
    //             menuName: '代理列表',
    //             menuUrl: '/agent_m_agent_table',
    //             menu_href: 9-1,
    //           },
    //           {
    //             menuName: '代理招商审核',
    //             menuUrl: '/agent_m_agent_verify_table',
    //             menu_href: 9-2,
    //           },
    //           {
    //             menuName: '设置代理推荐人',
    //             menuUrl: '/agent_m_set_agent_rec_t',
    //             menu_href: 9-3,
    //           },
    //           {
    //             menuName: '城市点亮列表',
    //             menuUrl: '/agent_m_lit_city_table',
    //             menu_href: 9-4,
    //           },
    //         ]
    //       },
    //       {
    //         menuName: '节点管理',
    //         menuUrl: "",
    //         menu_href: '10',
    //         icon: "el-icon-s-unfold",
    //         sysMenuList: [
    //           {
    //             menuName: '节点列表',
    //             menuUrl: '/node_m_node_m_table',
    //             menu_href: 10-1,
    //           },
    //           {
    //             menuName: '新增节点列表',
    //             menuUrl: '/node_m_add_node_table',
    //             menu_href: 10-2,
    //           },
    //         ]
    //       },
    //       {
    //         menuName: '团队管理',
    //         menuUrl: "",
    //         menu_href: '11',
    //         icon: "el-icon-s-unfold",
    //         sysMenuList: [
    //           {
    //             menuName: '团队列表',
    //             menuUrl: '/team_m_team_m_table',
    //             menu_href: 11-1,
    //           },
    //         ]
    //       },
    //       {
    //         menuName: '拼团管理',
    //         menuUrl: "",
    //         menu_href: '12',
    //         icon: "el-icon-s-unfold",
    //         sysMenuList: [
    //           {
    //             menuName: '拼团列表',
    //             menuUrl: '/ping_tuan_m_ping_tuan_table',
    //             menu_href: 12-1,
    //           },
    //         ]
    //       },
    //       {
    //         menuName: '订单管理',
    //         menuUrl: "",
    //         menu_href: '13',
    //         icon: "el-icon-s-unfold",
    //         sysMenuList: [
    //           {
    //             menuName: '订单列表',
    //             menuUrl: '/order_m_normal_order_table',
    //             menu_href: 13-1,
    //           },
    //           {
    //             menuName: '待发货订单列表',
    //             menuUrl: '/order_m_wait_send_order_table',
    //             menu_href: 13-2,
    //           },
    //           {
    //             menuName: '拼团订单列表',
    //             menuUrl: '/order_m_ping_tuan_order_table',
    //             menu_href: 13-3,
    //           },
    //         ]
    //       },
    // ]
    //正式的请求方式
    this.leftPermission();
  },
  watch: {},
  methods: {

    //获取左侧菜单
    leftPermission() {
      //切换导航请求方式
      let menus = JSON.parse(sessionStorage.getItem("menus"));
      this.leftMenuList = this.formatMenuSto(menus);
      console.log("菜单菜单", this.leftMenuList)
      // let url = this.api.admin.seachUserMenu;
      // let data = {
      //   sessionId: sessionStorage.getItem("sessionId")
      // };
      // this.tools.directGet({
      //   url,
      //   params: data,
      //   success: (res) => {
      //     if (res.code == 200) {
      //       //格式化菜单
      //       this.leftMenuList = this.formatMenuF(res);
      //       console.log("左侧菜单", this.leftMenuList);
      //       //获取左侧导航菜单
      //     }
      //     this.activePath();
      //   },
      //   fail: (err) => {},
      // });
    },

    /* 处理菜单格式 */
    formatMenuSto (menu){
      var lMenu = menu || [];
      lMenu.forEach((item,index) => {
          item.menu_href = Math.random().toFixed(5);
          item.menuUrl = item.menuHref;
          if(item.sysMenuList) {
            item.sysMenuList.forEach((sItem,sIdx)=> {
              sItem.menu_href = Math.random().toFixed(5);
              sItem.menuUrl = sItem.menuHref;
            })
          }
      });
      return lMenu;
    },

    //菜单格式处理 请求
    formatMenuF(res) {
      var menu = res.data || res.data.records;
      var firstM = [];
      var secondM = [];
      var lMenu = []; //最后的menu结构
      if (menu) {
        menu.forEach((item, index) => {
          item.menu_href = Math.random().toFixed(5);
          item.menuUrl = item.menuHref;
          if (!item.parentId && item.isShow == "1") {
            item.sysMenuList = [];
            firstM.push(item);
          } else {
            secondM.push(item);
          }
        });
      }
      lMenu = firstM;
      secondM.forEach((item, index) => {
        for (var i = 0; i < lMenu.length; i++) {
          var fItem = lMenu[i];
          if (item.parentId == fItem.id && item.isShow == "1") {
            fItem.sysMenuList.push(item);
          }
        }
      });
      // console.log(lMenu, firstM, secondM);
      return lMenu;
    },

    //点击
    activePath() {
      //找到当前菜单项
      if ("/" == this.$route.path) {
        this.$nextTick(function () {
          //nextTick数据修改
          this.active = this.$route.path;
        });
      } else {
        this.$nextTick(function () {
          this.active = this.$route.path;
        });
      }
      console.log(this.$route, "aaa");
    },
    //    activePath(){
    //        this.active = this.$router.currentRoute.path
    //    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
.el-left-menu {
  height: 100%;
  width: 230px;
}
//隐藏滚动条
.el-left-menu::-webkit-scrollbar {
  width: 0 !important;
}
.el-menu-vertical-demo {
  height: 100%;
  box-sizing: border-box;
  padding-top: 10px;
}

.el-left-menu {
  width: 230px !important;
}

.el-menu.el-menu-vertical-demo {
  padding-left: 14px !important;
  background-color: #3366cc;
  box-sizing: border-box;
}

.el-menu-item {
  min-width: auto !important;
  padding-left: 55px !important;
}
.el-menu-item-group__title {
  padding-top: 0px !important;
}

.el-submenu {
  margin-left: 20px;
  padding-right: 20px;
}

.el-submenu__icon-arrow {
  color: #fff !important;
}

.el-menu-item {
  transition: all 0.2s ease-in-out;
  color: #fff !important;
  a {
    display: block;
    color: #bfcbd9;
  }
  //菜单悬停
  &.is-active {
    color: #fff !important;
    border-left: 5px solid #dfdfdf !important;
    background-color: #0074d9 !important;
  }
}

.el-menu-item:hover {
  background-color: #0074d9 !important;
  color: #fff !important;
  transition: all 0.2s ease-in-out;
}

.el-submenu__title {
  transition: all 0.2s ease-in-out;
  color: #fff !important;
}

.el-submenu__title:hover {
  background-color: #0074d9 !important;
  color: #fff !important;
  transition: all 0.3s ease-in-out;
  .el-submenu__icon-arrow {
    color: #fff !important;
  }
}
</style>

